<template>
  <div>
    <div class="me-login-box me-login-box-radius">
    用户名:<el-input type="text" v-model="registerForm.username" placeholder="请输入用户名"/>
    <br><br>
    密码： <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"/>
    <br><br>
    姓名:<el-input type="text" v-model="registerForm.truename" placeholder="请输入姓名"/>
      <br><br>
    电话:<el-input type="text" v-model="registerForm.telephone" placeholder="请输入电话号码"/>
      <br><br>
    性别:<el-input type="text" v-model="registerForm.sex" placeholder="请输入性别"/>
      <br><br>
      <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-button v-on:click="register" type="register" >注册</el-button>
    </div>
  </div>
</template>

<script >

  export default {
    name: 'Register',
    data () {

      return {
        registerForm: {
          username: '',
          password: '',
          telephone:'',
          sex:'',
          truename:'',
        },
        responseResult: [],
        options: [{
          value: 0,
          label: '学生'
        }, {
          value: 1,
          label: '教师'
        }, {
          value: 2,
          label: '管理员'
        },],
        value:0
      }
    },
    methods: {
      register () {
        console.log(this.registerForm.truename)
        this.$axios
          .post('/register', {
            username: this.registerForm.username,
            password: this.registerForm.password,
            telephone:this.registerForm.telephone,
            sex:this.registerForm.sex,
            truename:this.registerForm.truename,
            type:this.value
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/'})
            }
            else if (successResponse.data.code === 400){
               this.$message.error('添加失败');
            }
            else{
               this.$message.error('存在相同名字的用户');
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>



<style scoped>
  #login {
    min-width: 100%;
    min-height: 100%;
  }

  .me-video-player {
    background-color: transparent;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    position: absolute;
    left: 0;
    z-index: 0;
    top: 0;
  }

  .me-login-box {
    position: absolute;
    width: 300px;
    height: 260px;
    background-color: white;
    margin-top: 150px;
    margin-left: -180px;
    left: 50%;
    padding: 30px;
  }

  .me-login-box-radius {
    border-radius: 10px;
    box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
  }

  .me-login-box h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    vertical-align: middle;
  }

  .me-login-design {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
  }

  .me-login-design-color {
    color: #5FB878 !important;
  }

  .me-login-button {
    text-align: center;
  }

  .me-login-button button {
    width: 100%;
  }

</style>
